<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../../jQuery-JS/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        /*
        需求：
        1.直接打印img的宽度，观察其值
        2.在$(function(){})中打印img的宽度
        3.在window.onload中打印宽度
        4.在img加载完成后打印宽度
        */
        //1.直接打印img的宽度，观察其值
        console.log("直接打印"+$("img#logo").width());

        window.onload=function(){
            console.log("在window.onload中打印"+$("img#logo").width());
        };

        $(function(){
            console.log("在$(function(){})中打印"+$("img#logo").width());
        })

        /*
        $(document).ready(function(){

        })
        */
    </script>
</head>
<body>
    <h1>测试window.onload与$(document).ready()</h1>
    <img id="logo" src="https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2017-05-19/6fec71d56242b74eb24b4ac80b817eac.png">

    <!--
        区别:
        window.onload与 $(document).ready()
          * window.onload
            * 包括页面的图片加载完后才会回调(晚)
            * 只能有一个监听回调
          * $(document).ready()
            * 等同于: $(function(){})
            * 页面加载完就回调(早)
            * 可以有多个监听回调
-->
</body>
</html>